<template>
  <div class="filling">
    <div class="topic" v-for="(item, index) in fillTopic">
      <p class="filling_num">
        {{index + 1}}.
        <span class="mold">（填空题 {{item.sorce}} 分）</span>
      </p>

      <p class="name" v-html="item.topicSubject"></p>

      <div class="select" v-for="(o, i) in item.answers">
        <input
          type="text"
          name="filling"
          class="fill"
          @change="onChange(index,i)"
          :value="item.submitAnswer[i]"
        />
      </div>

      <div class="correctAnswer" v-show="isSubmit">
        正确答案:
        <span
          class="correctOption"
          v-for="obj in item.answers"
          :class="{'right': item.situation == '1'}"
        >
          <span v-html="obj"></span>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import Bus from '@/common/bus';

export default {
  name: 'filling',
  data() {
    return {
      isSubmit: false,
      fills: [],
    };
  },
  props: {
    fillTopic: {
      type: Array,
      default: [],
    },
  },
  watch: {
    fillTopic: {
      handler(n, o) {
        this.init();
      },
    },
  },
  mounted() {
    this._submited();
  },
  methods: {
    init() {
      this.fills = [];
      for (const iter of this.fillTopic) {
        this.fills.push(iter.answers.length);
      }
    },
    _submited() {
      Bus.$on('submit', () => {
        this.isSubmit = true;
      });
    },

    onChange(index, i) {
      const fill = document.querySelectorAll('.fill');
      let flag = false;
      let valList = []; /* 保存选项信息 */

      // let iid = i;
      // if (index != 0) {
      //   for (let k = 0; k <= index; k++) {
      //     iid += this.fills[k - 1];
      //   }
      // }

      if (index == 0) {
        for (let j = 0; j < this.fills[index]; j++) {
          if (fill[j].value != '') {
            flag = true;
          } else {
            flag = false;
          }

          valList.push(fill[j].value);
        }
      } else {
        let m = index * this.fills[index - 1];
        let max = m + this.fills[index];
        for (let j = m; j < max; j++) {
          if (fill[j].value != '') {
            flag = true;
          } else {
            flag = false;
          }
          valList.push(fill[j].value);
        }
      }

      var fillTopicOk = {
        num: index + 1,
        finish: flag,
        topicList: {
          id: this.fillTopic[index].id,
          kind: '3',
          submitAnswer: valList,
        },
      };

      Bus.$emit('fillTopic', fillTopicOk);
    },
  },
  beforeDestroy() {
    Bus.$off('submit');
  },
};
</script>

<style scoped>
.filling .topic {
  margin-bottom: 50px;
}

.filling .mold {
  color: #a8a8b3;
}

.filling .name {
  width: 800px;
  line-height: 24px;
  margin-bottom: 20px;
}

.filling .select .fill {
  min-width: 70%;
  margin-bottom: 10px;
  outline: none;
  padding: 10px;
  font-size: 16px;
  color: #181e33;
  border-radius: 10px;
  border: none;
  border: 1px solid #a8a8b3;
  box-sizing: border-box;
  resize: none;
}

.filling .select .fill:focus,
.filling .select .fill:hover {
  border-color: #6486ff;
}
.correctAnswer {
  height: 60px;
  line-height: 60px;
  text-indent: 1rem;
  font-size: 16px;
  background-color: #f2f4f7;
  border-left: 1px solid #6486ff;
}
.correctAnswer .correctOption {
  display: inline-block;
  margin-right: 8px;
  color: #f00;
}
.right {
  color: #6486ff !important;
}
</style>